import { useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import { useMenuKey } from '@/stores'
import {
  RiHome6Line,
  RiHome6Fill,
  RiAccountCircle2Line,
  RiAccountCircle2Fill,
} from 'react-icons/ri'
import './index.less'

type PropsType = {
}

const TabBarItem = TabBar.Item

const BottomNav = (props: PropsType) => {

  const {

  } = props

  const navigate = useNavigate()
  const location = useLocation()
  const { menuKey, setMenuKey } = useMenuKey((state) => state)

  useEffect(() => {
    for (const key in tabItems) {
      if (tabItems[key].key === location.pathname) {
        setMenuKey(tabItems[key].key)
      }
    }
  }, [location.pathname])

  const tabItems: { [key: string]: any } = {
    'home': {
      key: '/home',
      path: '/home',
      icon: <RiHome6Line size={24} />,
      activeIcon: <RiHome6Fill size={24} />,
      title: '首页',
    },
    'mine': {
      key: '/mine',
      path: '/mine',
      icon: <RiAccountCircle2Line size={24} />,
      activeIcon: <RiAccountCircle2Fill size={24} />,
      title: '我的',
    },
  }

  const getTabList = () => {
    let tabList = []
    true && tabList.push(tabItems['home'])
    true && tabList.push(tabItems['mine'])
    return tabList
  }

  const onMenuClick = (key: string, path: string) => {
    setMenuKey(key as string)
    navigate(path, { replace: true })
  }

  return <TabBar
    safeArea
    className='c-bottom-nav'
    activeKey={menuKey}
    onChange={(key) => { onMenuClick(key, key) }}
  >
    {getTabList().map((item) => (
      <TabBarItem
        key={item.key}
        icon={menuKey === item.key ? item.activeIcon : item.icon}
        title={item.title}
        // onClick={() => { onMenuClick(item.key, item.path) }}
      />
    ))}
  </TabBar>
}

export default BottomNav
